<template>
  <div>
    <!-- table -->
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="12" :xs="24">
          <head-info title="$t('helpList.mj')" :content="buyerCnt" :bordered="true"/>
        </a-col>
        <a-col :sm="12" :xs="24">
          <head-info title="$t('helpList.sj')" :content="shopCnt" :bordered="true"/>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top: 24px">
      <div class="table-operator">
        <div style="margin-bottom:15px;">
          {{ $t('helpList.lxsx') }}:
          <a-radio-group @change="handleChangeType" defaultValue="-1">
            <a-radio-button>{{ $t('helpList.qb') }}</a-radio-button>
            <a-radio-button value="buyer">{{ $t('helpList.mj') }}</a-radio-button>
            <a-radio-button value="shop">{{ $t('helpList.sj') }}</a-radio-button>
          </a-radio-group>
          <a-button style="margin-left:15px;" type="primary" icon="plus" @click="handleClickAdd">{{ $t('helpList.xj') }}</a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="dataLoading"
      >
        <template slot="content" slot-scope="text">
          <span>
            <span style="cursor: pointer" @click="handleClickViewContent(text)">{{ $t('helpList.djck') }}</span>
          </span>
        </template>
        <template slot="url" slot-scope="text">
          <span v-if="text!=null">
            <a target="_blank" :href="text">{{ $t('helpList.ck') }}</a>
          </span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a @click="handleClickEdit(record)">{{ $t('helpList.bj') }}</a>
          <a-divider type="vertical" />
          <span>
            <a-popconfirm title="$t('helpList.sfysccx')" @confirm="handleClickDelete(record.id)">
              <a style="color:red">{{ $t('helpList.sc') }}</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </a-card>
    <create-form ref="createModal" @ok="handleAddOk" />
    <edit-form ref="editModal" @ok="handleAddOk" />
    <a-modal title="$t('helpList.xq')" v-model="showDialogDetail" @ok="hideDialogDetail" okText="$t('helpList.qr')" cancelText="$t('helpList.qx')">
      <div v-html="currContent"></div>
    </a-modal>
  </div>
</template>

<script>
import HeadInfo from '@/components/tools/HeadInfo'
import CreateForm from './CreateForm'
import EditForm from './EditForm'
import { mixin, mixinDevice } from '@/utils/mixin'

export default {
  name: 'content_bind',
  mixins: [mixin, mixinDevice],
  components: {
    HeadInfo,
    CreateForm,
    EditForm
  },
  data () {
    return {
      description: this.$t('helpList.bxbzkytglbszkjfw'),
      loading: false,
      dataLoading: false,
      // table
      columns: [
        {
          title: this.$t('helpList.lx'),
          dataIndex: 'belong',
          key: 'belong',
          scopedSlots: { customRender: 'belong' }
        },
        {
          title: this.$t('helpList.lj'),
          dataIndex: 'url',
          key: 'url',
          scopedSlots: { customRender: 'url' }
        },
        {
          title: this.$t('helpList.bt'),
          dataIndex: 'title',
          key: 'title',
          scopedSlots: { customRender: 'title' }
        },
        {
          title: this.$t('helpList.nr'),
          dataIndex: 'content',
          key: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: this.$t('helpList.rq'),
          dataIndex: 'created_at',
          key: 'created_at',
          scopedSlots: { customRender: 'created_at' }
        },
        {
          title: this.$t('helpList.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      errors: [],
      buyerCnt: 0,
      shopCnt: 0,
      showDialogDetail: false,
      currContent: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    hideDialogDetail () {
      this.showDialogDetail = false
    },
    handleClickAdd () {
      this.$refs.createModal.add()
    },
    handleClickEdit (row) {
      this.$refs.editModal.show(row)
    },
    getList (type) {
      let url = '/help/list'
      if (type !== undefined) {
        url += '?type=' + type
      }
      this.$http.get(url).then(res => {
        let ress = []
        res.forEach((vv, kk) => {
          vv.key = kk
          ress.push(vv)
        })
        this.data = ress
        this.buyerCnt = 0
        this.shopCnt = 0
        this.data.forEach(item => {
          if (item.belong === this.$t('helpList.mj')) {
            this.buyerCnt++
          } else {
            this.shopCnt++
          }
        })
      }).catch(err => {
        this.$notification.error({
          message: this.$t('helpList.sb'),
          description: err.message
        })
      })
    },
    handleClickDelete (id) {
      this.$http.post('/help/delete', this.$qs.stringify({
        id: id
      })).then(res => {
        const newData = this.data.filter(item => item.id !== id)
        this.data = newData
      }).catch(err => {
        this.$notification.error({
          message: this.$t('helpList.sb'),
          description: err.message
        })
      })
    },
    handleChangeType (e) {
      this.getList(e.target.value)
    },
    handleAddOk (form) {
      this.$http.post('/help/add', this.$qs.stringify(form)).then(res => {
        if (res.code === 0) {
          this.getList();
          this.$notification.success({
            message: this.$t('helpList.cg'),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t('helpList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('helpList.sb'),
          description: err.message
        })
      })
    },
    handleClickViewContent (text) {
      this.currContent = text
      this.showDialogDetail = true
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .douyin-bind-img{
    margin-bottom:10px;
    text-align: center;
  }
  .douyin-bind-img img{
    width:100px;
    height:100px;
    border-radius: 50%;
  }
</style>
